<template>
  <div
    class="fixed bottom-0 left-0 w-full h-20 flex justify-between items-center bg-base-300"
  >
    <div class="absolute -top-4 left-0 w-full">
      <el-slider
        :show-tooltip="false"
        :min="0"
        v-model="currentTime"
        :max="duration"
        @input="onInput"
      />
    </div>
    <div v-if="!playData.id" class="ml-5 flex">
      <img
        class="w-14 h-14 rounded"
        src="https://img2.baidu.com/it/u=1529945916,787585314&fm=253&fmt=auto&app=120&f=JPEG?w=1051&h=800"
        alt=""
      />
      <div class="ml-5 flex flex-col justify-evenly">
        <p>帅小伙开发的</p>
        <p>音乐网站</p>
      </div>
    </div>
    <div v-else class="ml-5 flex">
      <img class="w-14 h-14 rounded" :src="playData.al.picUrl" alt="" />
      <div class="ml-5 flex flex-col justify-evenly">
        <p>{{ playData.name }}</p>
        <p>{{ nowTime }} / {{ time }}</p>
      </div>
    </div>
    <div class="flex items-center">
      <go-start
        @click="last"
        class="mr-5 cursor-pointer"
        theme="filled"
        size="30"
      />
      <play
        @click="playMusic"
        theme="filled"
        v-if="!onOff"
        size="30"
        class="cursor-pointer"
      />
      <pause-one
        @click="pause"
        class="cursor-pointer"
        v-else
        theme="filled"
        size="30"
      />
      <go-end
        @click="next"
        class="ml-5 cursor-pointer"
        theme="filled"
        size="30"
      />

      <div class="ml-5" @click.stop="showVolume = !showVolume">
        <div
          v-if="showVolume"
          class="absolute bottom-12 -ml-2"
        >
          <el-slider
            @input="volumeInput"
            v-model="volume"
            vertical
            height="200px"
          />
        </div>
        <volume-mute
          v-if="volume === 0"
          class="cursor-pointer"
          theme="filled"
          size="30"
        />
        <volume-small
          v-else-if="volume > 0 && volume <= 50"
          class="cursor-pointer"
          theme="filled"
          size="30"
        />
        <volume-notice v-else class="cursor-pointer" theme="filled" size="30" />
      </div>
    </div>
    <div class="flex items-center mr-5">
      <div class="pr-5 cursor-pointer">
        <play-cycle
          @click="changePlayStatus(1)"
          v-show="playStatus === 0"
          theme="filled"
          size="30"
        />
        <play-once
          @click="changePlayStatus(2)"
          v-show="playStatus === 1"
          theme="filled"
          size="30"
        />
        <shuffle-one
          @click="changePlayStatus(0)"
          v-show="playStatus === 2"
          theme="filled"
          size="30"
        />
      </div>
      <hamburger-button
        class="cursor-pointer"
        theme="filled"
        size="30"
        @click.stop="isShow = true"
      />
    </div>
    <ul
      v-if="isShow"
      class="bg-base-100 w-56 h-56 overflow-auto absolute right-0 bottom-20 rounded"
    >
      <li
        class="p-2 flex items-center justify-between hover:bg-base-300 cursor-pointer"
        :class="{ 'bg-base-300': tag === index }"
        v-for="(item, index) in playArr"
        :key="item.id"
      >
        <span>{{ index + 1 }}</span>
        <p class=" w-20 truncate ...">{{ item.name }}</p>
        <pause-one
          @click.stop="pause"
          v-if="tag && tag === item.id && onOff"
          class="cursor-pointer"
          theme="filled"
          size="30"
        />
        <play
          @click.stop="clickPlay(item.id)"
          v-else
          theme="filled"
          size="30"
          class="cursor-pointer"
        />
        <delete-four theme="filled" size="30" @click.stop="removeItem(index)" />
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
  import {
    GoStart,
    Play,
    PauseOne,
    GoEnd,
    HamburgerButton,
    PlayCycle,
    PlayOnce,
    ShuffleOne,
    VolumeSmall,
    VolumeNotice,
    VolumeMute,
    DeleteFour,
  } from "@icon-park/vue-next";
  import { useSongPlayStore } from "../../store/songPlay";
  import { computed, ref, toRefs, reactive } from "vue";
  const {
    currentTime,
    duration,
    onInput,
    playData,
    tag,
    playStatus,
    playMusic,
    pause,
    last,
    next,
    changePlayStatus,
    volume,
    volumeInput,
    playOne,
    shuffleOnce,
    clickPlay,
    playArr,
    onOff,
    removeItem
  } = toRefs(useSongPlayStore());

  //是否显示音量条
  let showVolume = ref(false);

  //播放列表是否显示
  let isShow = ref<boolean>(false);

  // 获取歌曲总时长
  const time = computed(() => {
    let m = String(Math.floor(duration.value / 60));
    let s = String((duration.value % 60).toFixed(0));
    return `${m.length === 1 ? "0" + m : m} : ${s.length === 1 ? "0" + s : s}`;
  });
  // 获取歌曲正在播放的时长
  const nowTime = computed(() => {
    let m = String(Math.floor(currentTime.value / 60));
    let s = String((currentTime.value % 60).toFixed(0));
    return `${m.length === 1 ? "0" + m : m} : ${s.length === 1 ? "0" + s : s}`;
  });
  //点击关闭音量条
  window.onclick = () => {
    showVolume.value = false;
    isShow.value = false;
  };
</script>

<style scoped></style>
